<template>
  <!-- 头部 -->
  <div class="searchTop">
    <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
      <use xlink:href="#icon-zuojiantou"></use>
    </svg>
    <input
      type="text"
      placeholder="陈奕迅"
      v-model="searchMusic"
      @keydown.enter="searchMusics"
    />
  </div>
  <!-- 历史记录 -->
  <div class="searchHistory">
    <span class="historyStyle">历史</span>
    <div style="flex: 2">
      <span
        v-for="keyword in keywordList"
        :key="keyword"
        style="margin-right: 0.1rem"
        @click="clickSearchMusic(keyword)"
      >
        <van-tag round type="primary" size="large">{{ keyword }}</van-tag>
      </span>
    </div>
    <svg class="icon" aria-hidden="true" @click="deleteHistory">
      <use xlink:href="#icon-shanchu"></use>
    </svg>
  </div>
  <!-- 歌曲列表 -->
  <van-loading size="1rem" v-if="Loading" class="loading"
    >音乐舞台正在搭建中...</van-loading
  >
  <div
    v-else
    class="musicContentFooter"
    :class="{ active_height: searchMusicList.length }"
  >
    <ul>
      <li v-for="(song, index) in searchMusicList" :key="song.id">
        <i class="index">{{ index + 1 }}</i>
        <div class="musicNameAndAuthor" @click="playXMusic(index)">
          <span class="musicName">{{ song.name }}</span>
          <div class="allName">
            <i
              style="
                font-style: normal;
                opacity: 0.5;
                margin-top: 0.15rem;
                font-size: 0.25rem;
                margin-right: 0.2rem;
              "
              v-for="ar in song.ar"
              :key="ar.id"
              >{{ ar.name }}</i
            >
          </div>
        </div>
        <div class="twoIcon">
          <svg class="icon" aria-hidden="true" v-if="song.mv">
            <use xlink:href="#icon-24gl-playSquare"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-caidan"></use>
          </svg>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { reqSearchMusicInfo } from "@/api/home";
import { useStore } from "vuex";

export default {
  setup() {
    //数据
    let states = reactive({
      keywordList: JSON.parse(sessionStorage.getItem("keywordList")) || [], //从sessionStorage获取历史记录
      searchMusic: "", //保存用户输入的搜索内容
      searchMusicList: [],
      Loading: false,
    });
    //vuex
    let { commit, dispatch } = useStore();

    //方法 按回车搜索歌曲
    async function searchMusics() {
      states.Loading = true;
      if (states.searchMusic.trim() !== "") {
        //搜索内容不能与历史记录中重复并且不能为空
        if (states.keywordList.indexOf(states.searchMusic) == -1) {
          states.keywordList.unshift(states.searchMusic);
          //当保存的历史记录超过5个就删除最后一个
          states.keywordList.length > 10 ? states.keywordList.pop() : "";
          //将其保存在sessionStorage中 防止刷新后历史记录消失
          sessionStorage.setItem(
            "keywordList",
            JSON.stringify(states.keywordList)
          );
        }
        //发送请求 获取搜索歌曲
        let results = await reqSearchMusicInfo(states.searchMusic);
        if (results.status == 200) {
          states.searchMusicList = results.data.result.songs || [];
          states.Loading = false;
        }
        states.searchMusic = "";
      }
    }

    //方法 点击 删除历史记录
    function deleteHistory() {
      sessionStorage.removeItem("keywordList");
      states.keywordList = [];
      states.searchMusicList = [];
    }

    //方法 点击 历史记录 获取搜索歌曲
    async function clickSearchMusic(keyword) {
      states.Loading = true;
      let results = await reqSearchMusicInfo(keyword);
      if (results.status == 200) {
        states.searchMusicList = results.data.result.songs || [];
        states.Loading = false;
      }
    }

    //方法 点击播放音乐
    function playXMusic(index) {
      commit("UPDATEPLAYLIST", { list: states.searchMusicList, index });
      dispatch("getMusicLyric", states.searchMusicList[index].id);
    }

    return {
      ...toRefs(states),
      searchMusics,
      deleteHistory,
      clickSearchMusic,
      playXMusic,
    };
  },
};
</script>

<style lang="less" scoped>
.searchTop {
  width: 100%;
  height: 1rem;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  input {
    width: 90%;
    margin-left: 0.4rem;
    padding: 0.1rem;
    border: none;
    border-bottom: 1px solid #999;
  }
}
.searchHistory {
  width: 100%;
  padding: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .historyStyle {
    font-weight: 700;
    margin-right: 0.1rem;
  }
}
.musicContentFooter {
  margin-top: 0.3rem;
  ul li {
    display: flex;
    justify-content: space-between;
    line-height: 100%;
    padding-left: 0.2rem;
    margin-top: 0.25rem;
    .index {
      width: 0.4rem;
      height: 0.5rem;
      text-align: center;
      line-height: 0.5rem;
      font-style: normal;
    }
    .musicNameAndAuthor {
      flex: 2;
      margin-left: 0.1rem;
      display: flex;
      flex-direction: column;
      .musicName {
        width: 5.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .allName {
      width: 2.5rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .twoIcon {
      flex: 0.5;
      .icon:first-child {
        float: left;
      }
      .icon:last-child {
        float: right;
        margin-right: 0.2rem;
      }
    }
  }
}
.loading {
  text-align: center;
  line-height: 100%;
  margin-top: 5rem;
}
.active_height {
  height: 27.2rem;
}
</style>